<template>
  <div>
    <el-dialog
      :model-value="dialogVisible"
      :title="dialogTitle"
      :width="dialogWidth"
      :modal="modal"
      draggable
      destroy-on-close
      :close-on-click-modal="false"
      append-to-body
      before-close="beforeClose"
      @close="dialogClosed"
      @closed="dialogClosed"
    >
      <!-- 这里添加自定义的弹出框内容 -->
      <slot />
      <template #footer>
        <span class="dialog-footer">
          <slot name="footer" />
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElDialog } from 'element-plus'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  dialogTitle: {
    type: String,
    default: '',
  },
  dialogWidth: {
    type: String,
    default: '',
  },
  modal: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['dialogClosed'])

function beforeClose(done) {
  // 在这里执行关闭前的自定义操作，例如验证或数据处理
  done() // 调用 done 函数以继续关闭流程
}

function dialogClosed() {
  emits('dialogClosed')
}
</script>

<style scoped>
/* 添加自定义的样式 */
.class {
  width: 600px;
  text-align: center;
}
</style>
